/* Flutter框架结构:响应式框架、2D渲染引擎、各种UI控件
*
*  Flutter中一切皆为组件
*   1. 一个控件：输入框、文本组件等
*   2.一个样式定义：字体大小、配色方案等
*   3. 布局的某个属性：如背景色等
*   4.看的见的组件成为Element，和交互相关的组件(事件、手势监听)成为Widget，Widget用来配置Element
*
*
* android/ios为命令式编程 状态-属性-数据
* vue-react-angular为声明式编程，管理好状态，数据自动更新
* */

import 'package:flutter/material.dart';

/// flutter ui除了：widget tree，还有element tree和renderObject tree，
/// widget并不是真正显示在屏幕上的东西而是配置信息，它是不可变的，用来描述element
/// 而Element tree才是真正显示在屏幕上的视图数
/// 当widget进行改变的时候，会重新创建新的widget，这时候element不一定会重新创建

/* Flutter布局原理：
    最终形成树结构，顶部为父Widget（RenderObject），将其约束传递给子组件（BoxContraints：minWidth、maxWidth、minHeight、maxHeight）
    用约束告诉子组件应该如何调节自己的size，不同widget有不同调整方式，子组件都可以获取父组件约束
    子组件绘制完毕，计算所有子组件大小，返回给父组件，父组件根据大小，决定如何排布所有子组件
 */

/*
*  Flutter多线程模型
*  1.Platform Runner Thread：与平台交互
*  2.IO Runner Thread：IO操作
*  3.GPU Runner Thread：Skia等绘制、渲染
*  4.UI Runner Thread
* */
void main() {
  // 打印日志
  debugPrint('hello');
  runApp(MyApp());
}

// 解决嵌套问题，抽取Widget
// 直接继承Widget(extends Widget)实现该方法比较繁琐
/*@override
  Element createElement() {
    throw UnimplementedError();
  }*/
class MyApp extends StatelessWidget /*Widget*/ {
  @override
  Widget build(BuildContext context) {
    // MaterialApp:一般作为APP顶层的主页入口，可配置主题，多语言，路由等
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 去掉debug标签
      // Scaffold	一般用户页面的承载Widget，包含appbar、snackbar、drawer等material design的风格
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 一个Scaffold可以看做为一个界面，类似Activity
    return Scaffold(
      appBar: AppBar(
        title: Text('hello Flutter'),
      ),
      body: CheckBoxBody(),
    );
  }
}

// StatelessWidget使用@immutable，表示不可变，所有的属性、组件都应该为final的（包括成员变量）
class ContextBody extends StatelessWidget {
  // 使用var会有警告,应该使用final修饰  final flag = true;
  var flag = true;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'hello flutter',
            style: TextStyle(fontSize: 40, color: Colors.orange),
          ),
          // 此时点击checkbox没反应，因为StatelessWidget不可变
          Checkbox(value: flag, onChanged: (value) => flag = value)
        ],
      ),
    );
  }
}

// flutter中所有的widget都不能定义状态(类似var flag=true)，使用Widget有@immutable注解，包括StatefulWidget、StatelessWidget
// 包括StatefulWidget借助Stage管理状态
class CheckBoxBody extends StatefulWidget {
  @override
  _CheckBoxBodyState createState() => _CheckBoxBodyState();
}

class _CheckBoxBodyState extends State<CheckBoxBody> {
  var flag = true;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Checkbox(
        value: flag,
        onChanged: (value) {
          setState(() {
            flag = value;
          });
        },
      ),
    );
  }
}
